<!-- AI预警 -->
<template>
	<card :cardHeight="cardHeight" noMore noborder cardTitle="AI预警"><Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart></card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
import { priceFormat } from '@/utils/base';
import { mortgageapi } from '@/api/index.js';
let hideStyle = {
	normal: {
		color: '#f7f8fa', //未完成的圆环的颜色
		label: {
			show: false
		},
		labelLine: {
			show: false
		}
	},
	emphasis: {
		show: false
	}
};
export default {
	name: 'alarmLevel',
	mixins: [StatisticsMixins],
	data() {
		return {
			option_column: {
				color: ['#FFAE78', '#14C9C9', '#48A2FE'],
				backgroundColor: '#fff',
				grid: {
					left: '8%',
					right: '8%',
					top: '12%',
					bottom: '18%'
				}, //图表的位置 
				legend: {
					data: ['计步异常', '离群告警', '基站离线'],
					show: true,
					icon: 'circle',
					top: 'bottom',
					textStyle: {
						fontSize: 14
					}
				},
				title: {
					text: '0',
					subtext: '{subname|告警总数}',
					x: 'center',
					y: 'center',
					itemGap: 0,
					textStyle: {
						fontSize: 40
					},
					subtextStyle: {
						rich: {
							subname: {
								fontSize: 16,
								color: '#7E848A',
								padding: [-20, 0, 0, 0]
							}
						}
					}
				},
				series: [
					{
						name: '计步异常',
						type: 'pie',
						clockWise: true, //顺时针
						radius: ['79%', '89%'],
						label: {
							normal: {
								show: false,
								position: 'inside'
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},

						hoverAnimation: false,
						data: [
							{
								value: 75,
								name: '计步异常',
								itemStyle: {
									normal: {
										color: '#FFAE78'
									}
								}
							},
							{
								value: 25,
								name: 'hide',
								itemStyle: hideStyle
							}
						]
					},
					{
						name: '离群告警',
						type: 'pie',
						clockWise: true, //顺时针
						radius: ['59%', '69%'],
						label: {
							normal: {
								show: false,
								position: 'inside'
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						hoverAnimation: false,
						data: [
							{
								value: 65,
								name: '离群告警',
								itemStyle: {
									normal: {
										color: '#14C9C9'
									}
								}
							},
							{
								value: 35,
								name: 'hide',
								itemStyle: hideStyle
							}
						]
					},
					{
						name: '基站离线',
						type: 'pie',
						clockWise: true, //顺时针
						radius: ['39%', '49%'],
						label: {
							normal: {
								show: false,
								position: 'inside'
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						hoverAnimation: false,
						data: [
							{
								value: 55,
								name: '基站离线',
								itemStyle: {
									normal: {
										color: '#48A2FE'
									}
								}
							},
							{
								value: 45,
								name: 'hide',
								itemStyle: hideStyle
							}
						]
					}
				]
			}
		};
	},
	props: {
		pageScale: {
			type: [String, Number],
			default: 1
		}
	},
	watch: {
		pageScale: {
			handler(newValue, oldValue) {
				if (newValue && newValue != oldValue) {
					let pageScale = newValue;
					let option_column = {
						...this.option_column
					};
					option_column.title.textStyle.fontSize = 40 * pageScale;
					option_column.title.subtextStyle.rich.subname.fontSize = 16 * pageScale;
					option_column.legend.textStyle.fontSize = 14 * pageScale;
					option_column.series[0].radius=[79*pageScale+'%', 89*pageScale+"%"];
					option_column.series[1].radius=[59*pageScale+"%", 69*pageScale+"%"];
					option_column.series[2].radius=[39*pageScale+"%", 49*pageScale+"%"];
					for (var i = 0; i < option_column.series.data.length; i++) {
						let item = option_column.series.data[i];
						item.itemStyle.normal.borderWidth = 30 * pageScale;
						option_column.series.data[i] = item;
					}
					option_column.grid={
						top: 12*pageScale+"%",
						left: 8*pageScale+"%",
						right: 8*pageScale+'%',
						bottom: 18*pageScale+'%',
						containLabel: true
					};
					this.option_column = {
						...option_column
					};
				}
			},
			immediate: true
		},
	},
	methods: {
		getInfo() {
			this.$postAction(mortgageapi.echartsUrl.typeStatistics, {}).then(da => {
				if (da.code == 1) {
					// {
					// 			name: '计步异常',
					// 			value: da.fallingEarNum
					// 		},
					// 		{
					// 			name: '离群告警',
					// 			value: da.unInventoryNum
					// 		},
					// 		{
					// 			name: '基站离线',
					// 			value: da.offLineNum
					// 		}
					let total = 0;
					total = da.data.fallingEarNum + da.data.unInventoryNum + da.data.offLineNum;
					this.option_column.title.text = total;
					if (da.data.fallingEarNum > 100 || da.data.unInventoryNum > 100 || da.data.offLineNum > 100) {
						this.option_column.series[0].data[0].value = da.data.fallingEarNum;
						this.option_column.series[0].data[1].value = 1000 - da.data.fallingEarNum;
						this.option_column.series[1].data[0].value = da.data.unInventoryNum;
						this.option_column.series[1].data[1].value = 1000 - da.data.unInventoryNum;
						this.option_column.series[2].data[0].value = da.data.offLineNum;
						this.option_column.series[2].data[1].value = 1000 - da.data.offLineNum;
					} else {
						this.option_column.series[0].data[0].value = da.data.fallingEarNum;
						this.option_column.series[0].data[1].value = 100 - da.data.fallingEarNum;
						this.option_column.series[1].data[0].value = da.data.unInventoryNum;
						this.option_column.series[1].data[1].value = 100 - da.data.unInventoryNum;
						this.option_column.series[2].data[0].value = da.data.offLineNum;
						this.option_column.series[2].data[1].value = 100 - da.data.offLineNum;
					}
					let that = this;
					this.option_column.legend.formatter = function (name) {
						let data = that.option_column.series;

						let tarValue = 0;
						for (let i = 0, l = data.length; i < l; i++) {
							if (data[i].name == name) {
								tarValue = data[i].data[0].value;
							}
						}
						return name + '' + ' ' + tarValue + '';
					};
				}
			});
		}
	}
};
</script>
